﻿<!DOCTYPE html>
<html>
<head>
	<title>开始游戏</title>
</head>
<style>
	body{
    margin: 0;
    padding: 0;
     }
     .div{
    background: url(res/bg3.png);
    width: 300px;
    height: 550px;
    padding: 20px;
    text-align: center;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
}
#title{
  position:absolute;
    left:40px;
    top:120px;
}
	 .start{

	position:absolute;
    left:140px;
    top:280px;
    }
    #rep { 
    position:absolute;
    left:210px;
    top:450px;
    }
    #reh { 
    position:absolute;
    left:150px;
    top:400px;
    }
	#oImg{
      position:absolute;
    left:20px;
    top:130px;
   }
   #score { 
    position:absolute;
    left:150px;
    top:450px;
    }
    #score1 { 
    position:absolute;
    left:150px;
    top:450px;
    }
    #voiceopen{
   position:absolute;
    left:90px;
    top:450px;
    }
    #voiceclose{
   position:absolute;
    left:90px;
    top:450px;
    }
    #bulb{
    position:absolute;
    left:20px;
    top:170px;

    }
</style>
<body>
<div class="div">
<audio autoplay="autoplay"  src="res/mysoul.mp3"   preload="auto" id="sound1" ></audio>
<p style="color:white">你 好，<?php echo $_GET["username"];?><br/><br/>欢 迎 进 入 游 戏</p>

	<?php
	$name = $_GET["username"];
	 session_start();
	 $_SESSION["username"] = $name;
	  ?>

<img  src="res/1.png" id="title" style='display:block'>
<img src='res/music.png' id='bulb' style='display:block' >
<img class="start" id="start" src="res/play1.png"  style='display:block' onclick="start()">


<img src='res/score.png' id='score' onclick="score()"  style='display:block'>
<img src='res/score1.png' id='score1' onclick="score1()" style='display:none'>
<img  src="res/voice_open.png" id="voiceopen" style='display:block' onclick="voiceclose()">
<img  src="res/voice_close.png" id="voiceclose" style='display:none' onclick="voiceopen()">
<img src='res/g.png' id="oImg" style='display:none'>
<img src="res/wen.png"   id="rep"  style='display:block' onclick="reP()">
<img src="res/back1.png" id="reh"  style='display:none' onclick="reH()">



<script type="text/javascript">
  var havescore=false;//是否点赞
  var closemusic=false;//是否关闭声音
 function start()
        {
         document.getElementById("sound1").pause();
         window.open('zijietiaodong');
        }
        function voiceclose()
        {
          closemusic=true;
          document.getElementById('voiceopen').style.display = "none";
          document.getElementById('voiceclose').style.display = "block";
          document.getElementById("sound1").pause();
        }
        function voiceopen()
        {
          closemusic=false;
          document.getElementById('voiceopen').style.display = "block";
          document.getElementById('voiceclose').style.display = "none";
          document.getElementById("sound1").play();
        }
        function score()
        {
          havescore=true;
          document.getElementById('score').style.display = "none";
          document.getElementById('score1').style.display = "block";
        }
        function score1()
        {
          havescore=false;
          document.getElementById('score').style.display = "block";
          document.getElementById('score1').style.display = "none";
        }
        function reP()
        {
          document.getElementById('oImg').style.display = "block";
          document.getElementById('reh').style.display = "block";
          document.getElementById('start').style.display = "none";
          document.getElementById('bulb').style.display = "none";
          document.getElementById('title').style.display = "none";
    
          document.getElementById('voiceopen').style.display = "none";
          document.getElementById('voiceclose').style.display = "none";
          document.getElementById('score').style.display = "none";
          document.getElementById('score1').style.display = "none";
          document.getElementById('rep').style.display = "none";

        }
        function reH(){
          document.getElementById('oImg').style.display = "none";
         document.getElementById('reh').style.display = "none";
         document.getElementById('start').style.display = "block";
         document.getElementById('bulb').style.display = "block";
         document.getElementById('title').style.display = "block";
         document.getElementById('rep').style.display = "block";
        if(havescore)
        {
        document.getElementById('score1').style.display = "block";
        }
        if(!havescore)
        {
           document.getElementById('score').style.display = "block";
        }
        if(closemusic)
        {
          document.getElementById('voiceclose').style.display = "block";
        }
        if(!closemusic)
        {
              document.getElementById('voiceopen').style.display = "block";
        }
        }



        

        </script>
</div>
</body>
</html>